<template>
  <div class="p10">
    <div class="withdraw-wrap">
      <i>账户余额提现到微信</i>
      <label class="withdraw-ipt">
        &yen;
        <input v-model="txian" placeholder="0" />
      </label>
      <div class="balance">
        <p>当前可提现金额：&yen;{{allMoney}}</p>
        <span @click="getAllMoney">全部提现</span>
      </div>
    </div>
    <van-button type="primary" size="large" @click="config">确认提现</van-button>
  </div>
</template>
<script>
import { myWallet } from "@/api/mine.js";
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      txian: 0,
      allMoney: 0
    };
  },
  computed: {
    ...mapGetters(["userId"])
  },
  methods: {
    getAllMoney() {
      this.txian = this.allMoney;
    },

    config() {
      Toast({
        message: "平台上线30个工作日方可以开始提现",
        overlay: true,
        loadingType: "spinner",
        onClose: () => {}
      });
    }
  },
  mounted() {
    myWallet({
      user_id: this.userId
    }).then(res => {
      // eslint-disable-next-line
      console.log(res);
      this.allMoney = res.bal;
    });
  }
};
</script>
<style lang="less" scoped>
.withdraw-wrap {
  background: white;
  border-radius: @border-radius;
  padding: 10px;
  margin-bottom: 20px;
  i {
    color: @third-color;
    font-size: 13px;
  }
  .withdraw-ipt {
    display: flex;
    align-items: center;
    background: white;
    padding: 0 10px;
    margin-top: 10px;
    font-size: 36px;
    border-bottom: 1px solid @border-color;
    margin-bottom: 20px;
    overflow: hidden;
    input {
      flex: 1;
      padding: 10px;
    }
  }
  .balance {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    p {
      color: @second-color;
    }
  }
}
</style>